<template>
  <div>
    <comment-header>美容</comment-header>
    <div class="box" v-for="(item,index) in contentList" :key="index">
      <div class="smallbox">
        <div class="box_left">
          <!-- <router-link to="/hairdin"> -->
            <h3 v-text="item.name" @click="gotoHairdIn(item)"></h3>
          <!-- </router-link> -->
          <span>{{item.district}} {{item.formatted_address}}</span>
          <br>
          <span>周边: {{item.surround}}</span>
        </div>
        <!-- <router-link to="/hairdin"> -->
          <div class="box_right"  @click="gotoHairdIn(item)">
            <img :src="item.picture" alt>
          </div>
        <!-- </router-link> -->
      </div>
    </div>
  </div>
</template>
<script>
import commentHeader from "../../components/comment/commentHeader";

export default {
  components: {
    commentHeader
  },
  data() {
    return {
      contentList: [],
      page: 1,
      loadingMore: false
    };
  },
  mounted() {
    this.HairdrContent();
    window.onscroll = this.didscroll;
  },
  methods: {
      gotoHairdIn:function(value){
          this.$router.push({path:"/hairdin",query:{"id":value.id}});
          window.localStorage.setItem("hairdinItem",JSON.stringify(value))
      },
    HairdrContent: function() {
      var that = this;
      this.$http
        .get("/pet/v2/servicelist?page=" + this.page + "&tag_id=5")
        .then(function(data) {
          that.contentList = data.body.data.list;
          console.log(data);
        });
    },
    didscroll() {
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      var contentHeight = document.body.clientHeight;
      var windowHeight = window.innerHeight;
      if (scrollTop + windowHeight > contentHeight - 60) {
        if (this.loadingMore == false) {
          this.loadMore();
        }
      }
    },
    loadMore() {
      this.loadingMore = true;
      this.page += 1;
      var that = this;
      var url = "/pet/v2/servicelist?page=" + this.page + "&tag_id=5";
      this.$http.get(url).then(function(data) {
        that.contentList = that.contentList.concat(data.body.data.list);
        that.loadingMore = false;
      });
    }
  }
};
</script>
<style scoped>
.box {
  background: white;
}

.smallbox {
  width: 90vw;
  margin: 0 auto;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  justify-content: space-between;
  text-align: left;
  padding-top: 3vw;
  /* padding-bottom: 5vw; */
}
.box_right {
  width: 27vw;
  height: 27vw;
}
.box_left {
  width: 60vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.box_right > img {
  width: 100%;
}
h3 {
  font-size: 4.2vw;
  margin: 0 0 5vw 0;
  color: black;
}
span {
  font-size: 2.5vw;
  color: #a3a3a3;
}
</style>
